<template>
  <div>
    <a-table :columns="columns" :data-source="data" row-key="id">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-button type="link" @click="showDetail(record)">详情</a-button>
          <a-switch v-model:checked="record.active" checked-children="启用" un-checked-children="禁用" style="margin-left:8px;" />
        </template>
      </template>
    </a-table>
    <a-modal v-model:open="showModal" title="客户详情" @cancel="showModal = false" footer={null}>
      <div v-if="current">
        <p>姓名：{{ current.name }}</p>
        <p>手机号：{{ current.phone }}</p>
        <p>状态：{{ current.active ? '启用' : '禁用' }}</p>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const showModal = ref(false);
const current = ref<any>(null);
const data = ref([
  { id: 1, name: '王五', phone: '13800000001', active: true },
  { id: 2, name: '赵六', phone: '13800000002', active: false }
]);
const columns = [
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '手机号', dataIndex: 'phone', key: 'phone' },
  { title: '状态', dataIndex: 'active', key: 'active',
    customRender: ({ text }: any) => text ? '启用' : '禁用' },
  { title: '操作', key: 'action' }
];
function showDetail(record: any) {
  current.value = record;
  showModal.value = true;
}
</script> 